<template>
    <div>
        <Swiper></Swiper>
        <mt-cell title="打卡状态">
            <img slot="icon" src="@/assets/images/switch.png" width="24" height="24">
            <mt-switch v-if="dakaStatusSw" v-model="dakaStatus">{{statusText}}</mt-switch>
        </mt-cell>
        <mt-cell title="剩余天数">
            <img slot="icon" src="@/assets/images/calendar.png" width="24" height="24">
            <span>{{deadLine}}天</span>
        </mt-cell>
        <mt-cell title="打卡消息" is-link to="/index_daka_message">
            <img slot="icon" src="@/assets/images/message.png" width="24" height="24">
            <span>{{dakaMsg[0]}}</span>
            <mt-badge size="small" type="success">{{dakaMsg[1]}}</mt-badge>
        </mt-cell>
        <hr>
        <div class="daka_container">
            <router-link class="daka_card" v-bind:to="val.link" v-for="val in cardList" v-bind:key="val.id">
                <div>
                    <img v-bind:src="require('@/assets/images/'+val.img)" alt="">
                    <div>
                        <span>{{val.text}}</span>
                    </div>
                </div>
            </router-link>
        </div>
    </div>
</template>

<script>
import Swiper from '@/pages/index/components/Swiper.vue'
import { Toast } from 'mint-ui';

export default {
    name: 'Index',
    components: {
        Swiper
    },
    data() {
        return {
            dakaStatusSw: false,
            dakaStatus: true,
            statusText: '',
            deadLine: 0,
            dakaMsg: ["2022-1-1 00:00","success"],
            cardList: [{
                "id":"0",
                "link":"/query_heal",
                "img":"head-0.png",
                "text":"查询《健康打卡》信息"
                },
                {
                    "id": "1",
                    "link":"/query_night",
                    "img": "head-1.png",
                    "text": "查询《夜晚签到》信息"
                },
                {
                    "id": "2",
                    "link":"/goto_heal",
                    "img": "head-2.png",
                    "text": "我要《健康打卡》"
                },
                {
                    "id": "3",
                    "link":"/goto_night",
                    "img": "head-3.png",
                    "text": "我要《夜晚签到》"
                }
            ]
        }
    },
    methods: {
        getMainInfoFake() {
            let pseudoData = require('./pseudoData.json');
            this.dakaStatus = pseudoData.data.dakaStatus;
            this.deadLine = pseudoData.data.deadLine;
            this.dakaMsg = pseudoData.data.dakaMsg;
            this.cardList = pseudoData.data.cardList;
            // console.log(pseudoData.data);
        }
    },
    watch: {
        dakaStatus(val) {
            if(val === true) {
                fetch(this.url+"/user/markornotinfo",{
                    credentials: 'include',
                    method: 'POST',
                    body: `markornot=1`,
                    headers:{
                        'Content-Type':'application/x-www-form-urlencoded',
                    }
                }).then((res)=>{return res.text()})
                .then((value)=>{
                    value = JSON.parse(value);
                    if(value["data"][0]==1 || value["data"][0]==0) {
                        this.statusText = '开启';
                        Toast('打卡状态开启');
                    }
                }).catch(function(err) {
                    console.error(err);
                });
            }
            else if(val === false) {
                fetch(this.url+"/user/markornotinfo",{
                    credentials: 'include',
                    method: 'POST',
                    body: `markornot=0`,
                    headers:{
                        'Content-Type':'application/x-www-form-urlencoded',
                    }
                }).then((res)=>{return res.text()})
                .then((value)=>{
                    value = JSON.parse(value);
                    if(value["data"][0]==1 || value["data"][0]==0) {
                        this.statusText = '关闭';
                        Toast('打卡状态关闭');
                    }
                }).catch(function(err) {
                    console.error(err);
                });
            }
        }
    },
	mounted() {
        fetch(this.url+"/user/indexinfo",{
            credentials: 'include',
            method: 'POST'
        }).then((res)=>{return res.text()})
        .then((value)=>{
            value = JSON.parse(value);
            if(value["data"][0]["session"]) {
                Toast('未登录');
                return;
            }
            if(value["data"][0].markOrNot == 1) {
                this.dakaStatus = true;
                this.deadLine = value["data"][0].dakaTime;
                this.statusText = '开启';
            } else {
                this.dakaStatus = false;
                this.deadLine = value["data"][0].dakaTime;
                this.statusText = '关闭';
            }
            this.dakaStatusSw = true;
        }).catch(function(err) {
            console.error(err);
        });
    }
}
</script>

<style scoped>
    .daka_container {
        overflow: hidden;
    }
    .daka_card {
        float: left;
        padding: 0 0.25rem;
        text-decoration: none;
        transition: all 0.5s;
    }
    .daka_card:hover {
        transform: scale(1.1);
    }
    .daka_card div {
        margin: 0.5rem 0 0.5rem 0;
        background-color: #4ca9f9;
        border-radius: 10px;
        box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%);
    }
    .daka_card div img {
        width: 100%;
        height: 10%;
        border-radius: 8px 8px 0 0;
        object-fit: cover;
        opacity: .7;
    }
    .daka_card div div {
        color: white;
        padding: 15px 15px 12px 18px;
        text-align: center;
    }
    @media only screen and (max-width: 300px) {
		.daka_card {
			width: 100%;
		}
	}
    @media only screen and (min-width: 300px) {
		.daka_card {
			width: 50%;
		}
	}
    @media only screen and (min-width: 600px) {
		.daka_card {
			width: 33.333333%;
		}
	}
    @media only screen and (min-width: 1200px) {
		.daka_card {
			width: 25%;
		}
	}
</style>